<template>
  <div class="home-container">
    <!-- Logo 和欢迎信息 -->
    <div class="header">
      <img src="@/assets/logo.png" alt="Logo" class="logo" />
      <h1>欢迎来到 AI 聊天平台</h1>
    </div>

    <template class="input-area">
      <el-input type="textarea" v-model="newMessage"  :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入消息..." class="message-input" @keyup.enter="sendMessage"/>
      <el-button type="primary" @click="sendMessage" class="send-btn">发送</el-button>
    </template>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { axiosInstance } from '@/axios'; // 假设 axios 已配置
import {useStore} from 'vuex';
const store = useStore();


const newMessage = ref(""); // 用于输入框的绑定
const router = useRouter();
const token = localStorage.getItem('token');


// 发送消息
const sendMessage = () => {
  if (!newMessage.value.trim()) {
    return;
  }
  const chatMessage = newMessage.value;
  axiosInstance.post("/historyRecord/creatHistoryRecord",{ prompt: chatMessage },
  {
    headers: { token: token }
  })
      .then(res => {
        const data = res.data;
        const message={
          historyRecordId:data.data.historyRecordId,
          content: chatMessage
        }
        if (data.code === 100000) {
          store.dispatch('addHistoryRecord', data.data);
          store.dispatch('addMessage', message);
          router.push({
            name: 'chat-box', // 确保路由名称正确
            params: { historyRecordId: data.data.historyRecordId }, // 动态路径参数
          });



        }
      })

  // 清空输入框
  newMessage.value = "";
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 修改为 flex-start 来调整内容在垂直方向的位置 */
  height: 100vh;
  background-color: #ffffff;
  padding-top: 50px; /* 添加顶部内边距，避免内容太贴近顶部 */
}

.header {
  text-align: center;
  margin-bottom: 40px; /* 增加 logo 和欢迎信息之间的间距 */
}

.logo {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}

h1 {
  font-size: 24px;
  color: #333;
}

.input-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px; /* 将输入框区域向上移动20px */
  width: 100%;
  max-width: 500px;
}

.message-input {
  flex: 1;
  margin-right: 10px;
  height: 40px;
}

.send-btn {
  width: 80px;
  height: 40px;
}

</style>
